<template>
	<div>
		<h1 v-if="title">{{ title }}</h1>
		<ul class="goods" @click="goDetail">
			<li class="good">
				<div class="goodiv">
					<img
						class="goodivimg1"
						src="https://yanxuan-item.nosdn.127.net/ee0965b486874661667a9168ae0738fe.png?type=webp&imageView&quality=95&thumbnail=245x245"
						alt=""
						data-id="4013106"
					/>
					<img
						class="goodivimg"
						src="https://yanxuan-item.nosdn.127.net/b7d5a39aca6b0bf27991d2f6ef30f071.jpg?type=webp&quality=95&thumbnail=245x245&imageView"
						alt=""
						data-id="4013106"
					/>
					<div class="shelf" v-if="isShow">
						<div class="shelfleft">即将上架</div>
						<button class="shelfRemind">上架提醒</button>
					</div>
					<div class="goodivfooter">
						<div class="goodivFooterTitle" data-id="4013106">
							高钙高蛋白，脆脆虾 20克
						</div>
						<div class="goodivFooterPrice">¥18</div>

						<div class="goodivFooterIintroduce">整虾可食，口口松脆</div>
					</div>
				</div>
			</li>
			<li class="good" v-for="item in goodList" :key="item.id">
				<div class="goodiv">
					<img
						class="goodivimg1"
						:src="item.listPicUrl"
						alt=""
						data-id="3995824"
					/>
					<img
						class="goodivimg"
						:src="item.scenePicUrl"
						alt=""
						data-id="3995824"
					/>
					<div class="shelf" v-if="isShow">
						<div class="shelfleft">即将上架</div>
						<button class="shelfRemind">上架提醒</button>
					</div>
					<div class="goodivfooter">
						<div class="goodivFooterTitle" data-id="4013106">
							{{ item.name }}
						</div>
						<div class="goodivFooterPrice">¥{{ item.retailPrice }}</div>

						<div class="goodivFooterIintroduce">
							{{ item.simpleDesc }}
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	props: {
		goodList: {
			type: Array,
		},
		title: {
			type: String,
			default: "",
		},
		isShow: {
			type: Boolean,
			default: false,
		},
	},
	methods: {
		goDetail(event) {
			// console.log(event)
			const { id } = event.target.dataset
			if (id) {
				this.$router.push({
					name: "Detail",
					query: {
						id,
					},
				})
			}
		},
	},
}
</script>

<style lang="less" scoped>
h1 {
	font-size: 24px;
	text-align: center;
	padding-top: 40px;
	font-weight: 700;
	margin-bottom: 10px;
}
.goods {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.good {
		margin-bottom: 40px;
		float: left;
		.goodiv {
			text-align: center;
			position: relative;
			width: 245px;
			.shelf {
				position: relative;
				top: -35px;
				background: #e8bf5b;
				color: #fff;
				font-size: 14px;
				height: 34px;
				line-height: 34px;
				width: 245px;
				.shelfleft {
					padding: 0 35px;
					display: inline-block;
				}
				.shelfRemind {
					background: #fff;
					display: inline-block;
					width: 110px;
					height: 26px;
					color: #000;
					border: none;
					border-radius: 2px;
				}
			}
			.goodivimg1,
			.goodivimg {
				width: 245px;
				height: 245px;
			}
			.goodivimg {
				position: absolute;
				left: 0;
				opacity: 0;
			}
			.goodivFooterTitle {
				margin-top: 30px;
				cursor: pointer;
				font-size: 14px;
				font-weight: bold;
			}
			.goodivFooterTitle:hover {
				color: #b4a078;
			}
			.goodivFooterPrice {
				width: 180px;
				color: red;
				margin: 10px auto 0;
				padding-bottom: 10px;
				border-bottom: 1px solid #e8e8e8;
			}

			.goodivFooterIintroduce {
				color: #999;
				padding: 10px 0 40px;
			}
		}
	}
	.good:hover .goodivimg {
		opacity: 1;
	}
	.good:hover {
		background: #f4f0ea;
	}
}
</style>
